<template>
  <div ref="container">
    <slot></slot>
  </div>
</template>

<script>
import Viewer from "viewerjs";
import { mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations({
      ArchivesHeight: "archives/ArchivesHeight",
    }),
  },
  //挂载完以后 进行一下的操作
  mounted() {
    let container = this.$refs.container;
    //获取数据的高度 存放到仓库中
    this.ArchivesHeight(container.offsetHeight);
    const viewer = new Viewer(container, {});
    //监听dom改变  接受的函数是一个回调函数  是一个微任务  返回一个观察者
    var observer = new MutationObserver(function () {
      //dom改变的时候实施更新 监听内容
      viewer.update();
    });
    //讲观察元素与选项传给此方法  劫持需要更新的dom
    observer.observe(container, { subtree: true, childList: true });
  },
};
</script>

<style></style>
